<template>
  <div>
    <!-- 背景图 -->
    <bigbg :url="bandat.bgImg" :bigtext="bandat.title" :smalltext="bandat.subtitle"></bigbg>
    <!-- 轮播 -->
    <imgss
    v-if="imgarr.length"
     :imgarr='imgarr'></imgss>
    <!-- 详情页 -->
    <div
    v-html='pagetable'>
    </div>
 <!-- 高度 -->
  
    <!-- table -->
    <tabless 
    v-if="tablearr.length"
    :tablearr='tablearr'></tabless>
     <!-- <div style="
    background-color:#1b1c20 ;
    height:10px;
    margin-top:10px">
    </div> -->
    <!-- 头部组件 -->
    <Header></Header>
    <!-- 底部组件 -->
    <Footer></Footer>
  </div>
</template>
<script>
//引入头部组件 d1edd345-423a-4303-bb89-778fc08fc281
import { getlag, getpages, getimgs, gettables } from '@/api/srapi/srapi.js'
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
// 背景
import bigbg from "@/views/srdemo/component/bigbg.vue";
// table
import tabless from "@/views/srdemo/component/table.vue";
//img
import imgss from "@/views/srdemo/component/img.vue";

export default {
  name: "znldd",
  components: {
    Header,
    Footer,
    bigbg,
    tabless,
    imgss
  },
  watch: {
    $route () {
      // console.log('111');
      // console.log(this.$route.query.id);
      //页面得全部数据
      this.bandat = {},
        //详情页得数据
        this.pagetable = null,
        //轮播图得数据
        this.imgarr = [],
        //table得数据
        this.tablearr = [],
        //当前激活得table
        this.clicktableimg = 0
      //获取页面的全部数据
      this.getallpages()
      //  //获取轮播图片
      this.getimgss()
      //获取table图片
      this.gettabless()
    }
  },
  data () {
    return {
      //页面得全部数据
      bandat: {},
      //详情页得数据
      pagetable: null,
      //轮播图得数据
      imgarr: [],
      //table得数据
      tablearr: [],
      //当前激活得table
      clicktableimg: 0
    };
  },
  methods: {
    async getallpages () {
      const res = await getlag(this.$route.query.id)
      this.bandat = res.data.data
      //  console.log(res.data.data);
      //  console.log(res.data.data.pcUrl);
      const pages = await getpages(res.data.data.pcUrl)
      this.pagetable = pages.data.content

    },
    //获取轮播图
    async getimgss () {
      const res = await getimgs(this.$route.query.id)
      // console.log("imgs");
      res.data.data.banners.map((item) => {
        if (item.bannerImg) {
          this.imgarr.push(item)
        }
      })
      // console.log(this.imgarr);
    },
    //获取table图片
    async gettabless () {
      const res = await gettables(this.$route.query.id)
      // console.log('table图');
      // console.log( res.data.data.tabs);
      res.data.data.tabs.map((item) => {
        if (item.tabImg) {
          this.tablearr.push(item)
        }
        // console.log(this.tablearr);
      })
    },
  },

  mounted () {
    // console.log( this.$route.query.id);

    //获取页面的全部数据
    this.getallpages()
    //获取轮播图片
    this.getimgss()
    //获取table图片
    this.gettabless()
  }
}
</script>
<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
</style>
